// api分类
// 默认激活当前样式
a[1].classList.add("active")
//动态生成数组 渲染到页面
let ApiUl = document.querySelector(".api-list>ul")
console.log(ApiUl)
// 存储数据（造数据）后期由后端返回给我
let ApiArr = [
    // {text:"全部"},
    {text:"全部",tip:"全部"},
    {text:"生活服务",tip:"服务好"},
    {text:"金融科技",tip:"钱包鼓鼓"},
    {text:"交通地理",tip:"交通流畅"},
    {text:"充值缴费",tip:"余额不足"},
    {text:"数据智能",tip:"数据智能"},
    {text:"企业工商",tip:"企业工商"},
    {text:"应用开发",tip:"应用开发"},
    {text:"电子商务",tip:"电子商务"}
]
// 声明一个字符串 用来模板字符串作拼接
let ApiStr = ""
ApiArr.forEach((item,index) => {
    ApiStr +=`<li>${item.text}</li>` 
    
})
// console.log(ApiStr)
// 生成li 标签渲染到页面
ApiUl.innerHTML = ApiStr
// 拿到所有li 和 sapn
let span =document.querySelector(".api-list>span")
let input =document.querySelector(".api-list>input")
let lis =document.querySelectorAll(".api-list>ul li")
console.log(span,input,lis)
// 默认第一个激活样式
lis[0].classList.add("active")
// 点击每个li时 修改span和 input文本内容
lis.forEach((ele,i) => {
    ele.addEventListener("click",() => {
        // 点击时修改span和input文本内容
        // 点击后清除所有的激活样式
        for(let j = 0;j<lis.length;j++){
            lis[j].classList.remove("active")
        }
        lis[i].classList.add("active")
        span.innerHTML = ApiArr[i].text
        input.value = ApiArr[i].tip
    })
    
})
// 拿到后端数据
let api_contentArr=
[
    {
        img:"./images/API_01.jpg",
        title:"2021出行防疫政策指南",
        price:"0.11",
        isShow:false
    },
    {
        img:"./images/API_02.jpg",
        title:"2021出行防疫政策指南",
        price:"0",
        isShow:true
    },
    {
        img:"./images/API_03.jpg",
        title:"2021出行防疫政策指南",
        price:"0.11",
        isShow:false
    },
    {
        img:"./images/API_04.jpg",
        title:"2021出行防疫政策指南",
        price:"0",
        isShow:true
    },
    {
        img:"./images/API_01.jpg",
        title:"2021出行防疫政策指南",
        price:"0.11",
        isShow:false
    },
    {
        img:"./images/API_02.jpg",
        title:"2021出行防疫政策指南",
        price:"0",
        isShow:true
    },
    {
        img:"./images/API_03.jpg",
        title:"2021出行防疫政策指南",
        price:"0.11",
        isShow:false
    },
    {
        img:"./images/API_04.jpg",
        title:"2021出行防疫政策指南",
        price:"0",
        isShow:true
    },
    {
        img:"./images/API_01.jpg",
        title:"2021出行防疫政策指南",
        price:"0.11",
        isShow:false
    },
    {
        img:"./images/API_02.jpg",
        title:"2021出行防疫政策指南",
        price:"0",
        isShow:false
    },
    {
        img:"./images/API_03.jpg",
        title:"2021出行防疫政策指南",
        price:"0.11",
        isShow:false
    },
    {
        img:"./images/API_04.jpg",
        title:"2021出行防疫政策指南",
        price:"0",
        isShow:false
    },
    {
        img:"./images/API_01.jpg",
        title:"2021出行防疫政策指南",
        price:"0.11",
        isShow:false
    },
    {
        img:"./images/API_02.jpg",
        title:"2021出行防疫政策指南",
        price:"0",
        isShow:true
    },
    {
        img:"./images/API_03.jpg",
        title:"2021出行防疫政策指南",
        price:"0.11",
        isShow:false
    }
    
]
let str1  =""
// 获取ul元素
let api_content =document.querySelector(".api-content")
// 遍历数组
api_contentArr.forEach((item,index) => {
    //拼接字符串标签
    str1 +=`
    <li>
    <img src="${item.img}" alt="">
    <p>${item.title}</p>
    <span class="${item.price==="0"?"green":"red"}">${item.price==="0"?"免费":item.price}</span>
    <i class="${item.isShow==true?"show":"none"}">企业专用</i>
    </li>`
})
//渲染页面
api_content.innerHTML = str1


